<template>
    <div class="body">
        <!--头部-->
        <div class="blog_head">
            <!--<ul>
                <li>全部</li>
                <li>php</li>
                <li>java</li>
                <li>js</li>
            </ul>-->
            <div style="width: 200px;margin: 0 auto;color: navajowhite;font-size: 30px">
                <i class="el-icon-tickets"></i>
                博客列表
            </div>
        </div>
        <!--博客正文-->
        <div class="blog_body">
            <!--左边-->
            <div class="body_left">
                <!--博客开始-->
                <div class="blog_detail" v-for="v in blog" >
                    <div style="color: #337AB7;font-size: 22px;margin-top: 5px;margin-left: 10px">{{v.title}}</div>
                    <div class="info">
                        <img :src="v.img_url" alt="">{{v.username}}
                        <i style="font-size: 20px;margin: 0 10px 0 20%" class="el-icon-date"></i>{{v.createTime}}
                        <i style="font-size: 20px;margin: 0 10px 0 20%" class="el-icon-tickets"></i><span style="color:#33A3DD ">{{v.categoryName}}</span>
                    </div>
                    <!--1-->
                    <div class="content">
                        <!--<div v-html="content.replace(/\\/g,'')"></div>-->
                        <img class="img" :src="v.img_url" alt="">
                        <div class="content_info">{{v.text.substring(0, 170)}}....</div>

                        <!--标签-->
                        <div class="label">
                            <div  style="margin-top: 40px;font-size: 20px" class="el-icon-edit"></div>
                            <span style="color:#33A3DD ">
                                <ul class="ul">
                                    <li v-for="i in v.labels ">{{i.name}}</li>
                                </ul>
                            </span>
                            <!--地址显示-->
                            <span class="el-icon-location location">&nbsp{{v.address}}</span>
                            <el-button style="float: right;margin-top: 20px" @click="blog_detail(v.blogid)" type="primary" round>阅读全文</el-button>
                        </div>
                    </div>
                </div>

            </div>
            <!--右边-->
            <div class="body_right">
                <!--最新发表-->
                <div class="new_set">
                    <div class="set_d_1">最新博客</div>
                    <!--文章推荐-->
                    <ul class="u2">
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                    </ul>
                </div>
                <!--热门标签-->
                <div class="new_set">
                    <div class="set_d_1">热门博客</div>
                    <!--文章推荐-->
                    <ul class="u2">
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                        <li> <i class="el-icon-document"></i>最适合入门的laravel初级教程(一)</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--分页-->
        <div class="page">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="3"
                    layout="total, prev, pager, next"
                    :total="pageTotal">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "blog-list",
        data(){
            return{
                currentPage1: 1,
                blog:{},
                pageTotal:0,
            }
        },
        computed:{


        },
        created(){
          //初始化文章列表
            let url='https://www.dragonjun.com/boot/blog/get_all_blog';
            let data=JSON.stringify({'page':1,"pagenum":3});
            axios.post(url,data,{
                headers:{
                    'Content-Type': 'application/json',
                }
            }).then((data)=>{
                //console.log(data);
                this.blog=data.data.data.rows;
                this.pageTotal=data.data.data.count;
                //console.log(this.blog)
            }).catch((error)=>{
                console.log(error)
            })

        },

        methods:{
            /*跳转到博客的详情页*/
            blog_detail(id){
                alert('未开发！当前博客的Id'+id)
            },
            /*分页*/
            handleCurrentChange(val) {
                let url='https://www.dragonjun.com/boot/blog/get_all_blog';
                let data=JSON.stringify({'page':val,"pagenum":3});
                axios.post(url,data,{
                    headers:{
                        'Content-Type': 'application/json',
                    }
                }).then((data)=>{
                    //console.log(data);
                    this.blog=data.data.data.rows;
                    this.pageTotal=data.data.data.count;
                    //console.log(this.blog)
                }).catch((error)=>{
                    console.log(error)
                })
            }
            //替换


        },
    }
</script>

<style scoped>
    .body{
        height: auto;
        width: 1500px;
        margin: 5% auto;
        overflow: hidden;
        //box-shadow: 0 0 10px #666666;
        border-radius: 10px;
    }
    .blog_head{
        width: 1400px;
        height: 50px;
        //border: 1px solid red;
        background: #333333;
        margin: 0 auto;
        margin-top: 10px;
        border-radius: 5px;
        padding-top: 13px;
        margin-bottom: 30px;

    }
    ul{
        padding: 0;
        margin: 0;
    }
    .blog_head ul li{
        list-style: none;
        float: left;
        //border: 1px solid rebeccapurple;
        height:50px ;
        line-height: 50px;
        padding-left: 10px;
        padding-right: 10px;
        color: #9D9D9D;
    }
    .blog_head ul li:first-child{
        margin-left: 20px;
    }

    .blog_head ul li:hover{
        background: #008CBA;
        cursor: pointer;
        color: white;
    }
    .blog_body{
        width: 1400px;
        height: 900px;
        //border: 1px solid red;
        margin: 30px auto;
        padding-top: 20px;
        padding-bottom: 20px;
        background: #F8F8F8;
        overflow: hidden;
    }
    .body_left{
        width: 1000px;
        height: auto;
        //border: 1px solid red;
        float: left;
        margin-left: 10px;
    }

    .body_right{
        width:350px;
        height: auto;
        //border: 1px solid black;
        float: right;
        margin-right: 10px;
    }
    .blog_detail{
        width: 960px;
        height: 260px;
        margin: 10px auto;
        padding-bottom: 20px;
        box-shadow: 0 0 5px #666666;
        border-radius: 5px;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .info{
        margin-top: 10px;
        font-family: 楷体;
        font-size: 15px;
    }
    .info img{
        width: 30px;
        height: 30px;
        border-radius: 50px;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: 10px;
    }
    .content{
        width: 930px;
        height: auto;
        margin-top: 10px;
        overflow: hidden;
        color:#333333 ;
    }
    .img{
        width: 250px;
        height: 180px;
        border-radius: 20px;
        float: left;
        margin-left: 10px;
    }
    .content_info{
        height: 110px;
        width: 630px;
        float: right;
        text-indent: 2em;
        margin-right: 20px;
        margin-top: 10px;
    }
    .label{
        float: left;
        width: 600px;
        margin-left: 45px;
    }
    .ul{
        display: inline-block;
    }
    .ul li{
        list-style: none;
        float: left;
        margin-right: 10px;
    }
    .ul li:first-child{
        margin-left: 5px;
    }
    .new_set{
        width: 320px;
        height: 350px;
        margin: 10px auto;
        box-shadow: 0 0 5px #666666;
        border-radius: 5px;
        padding-top: 10px;
    }
    .set_d_1{
        margin-left: 10px;
        font-size: 22px;
        font-family: 楷体;
    }
    .u2{
        list-style: none;
        color: #337AB7;
    }
    .u2 li{
        margin-left: 10px;
        margin-top: 10px;
    }
    i{
        margin-right: 10px;
    }
    .u2 li:first-child{
        margin-top: 20px;
    }
    .u2 li:hover{
        cursor: pointer;
        color: red;
    }
    .page{
        width: 500px;
       margin-top: 20px;
        margin-left: 70px;
    }
    .location{
        margin-left: 120px;
    }




</style>